<template>
  <div class="op-container">
    <div class="dialog-ruleGuide">
      <quill-editor
        ref="myQuillEditor"
        v-model.trim="ruleGuideContent.content"
        :options="editorOption"
        class="editer"
      />
    </div>
    <div class="footer">
      <button v-if="authorityHandle(159)" class="btnStyle" @click="setContactUs">保存</button>
    </div>
  </div>
</template>
<script>
import { emojiEncode, emojiDecode } from '@/utils/index'
import { setContactUs, getContactUs } from '@/api/settings/settings'

export default {
  components: {},
  data() {
    return {
      ruleGuideContent: {
        content: ''
      },
      editorOption: {
        placeholder: '请输入内容',
        modules: { // 富文本初始化
          'emoji-toolbar': true,
          'emoji-shortname': true,
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
            ['blockquote', 'code-block'], // 引用，代码块
            [{ header: 1 }, { header: 2 }], // 标题，键值对的形式；1、2表示字体大小
            [{ list: 'ordered' }, { list: 'bullet' }], // 列表
            [{ script: 'sub' }, { script: 'super' }], // 上下标
            [{ indent: '-1' }, { indent: '+1' }], // 缩进
            [{ direction: 'rtl' }], // 文本方向
            [{ size: ['small', false, 'large', 'huge'] }], // 字体大小
            [{ header: [1, 2, 3, 4, 5, 6, false] }], // 几级标题
            [{ color: [] }, { background: [] }], // 字体颜色，字体背景颜色
            [{ font: [] }], // 字体
            [{ align: [] }], // 对齐方式
            ['clean'], // 清除字体样式
            ['image'], // 上传图片、上传视频
            ['emoji']
          ],
          history: {
            delay: 1000,
            maxStack: 50,
            userOnly: false
          },
          imageDrop: true,
          imageResize: {
            displayStyles: {
              backgroundColor: 'black',
              border: 'none',
              color: 'white'
            },
            modules: ['Resize', 'DisplaySize', 'Toolbar']
          }
        }
      }
    }
  },
  created() {
    this.getContactUs()
  },
  methods: {
    // 保存玩法管理
    setContactUs(e) {
      e.target.blur()
      const contents = emojiEncode(this.ruleGuideContent.content)
      setContactUs({ 'data': contents }).then(res => {
        this.$message.success('保存成功')
      })
    },
    // 加载玩法管理
    getContactUs() {
      getContactUs().then(res => {
        if (res.data === null) return
        this.ruleGuideContent.content = emojiDecode(res.data)
      })
    }

  }
}
</script>
<style lang="scss" scoped>
$menuText:#14162E; // 侧边栏字体颜色
$hoverColor:#1D143C;// 鼠标停留主色调浅色
$mainColor:#3b425d;// 主色调
.op-container {
  margin: 20px;
  display: flex;
  flex-direction: column;
  .dialog-ruleGuide {
      width: 900px;
      padding: 60px 0;
      border-radius: 10px;
      margin: 50px auto 0;
      .editer {
        border-radius: 8px;
        float: left;
        box-sizing: border-box;
        color: #606266;
        ::v-deep .ql-container {
          height: 600px;
          border-radius: 0px 0px 8px 8px;
        }
        ::v-deep .ql-toolbar.ql-snow {
          border-radius: 8px 8px 0px 0px;
        }

    }
  }
.footer {
    text-align: center;
    margin-top: 30px;
  }
}

</style>
